<template>
  <div id="app">
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>
</template>
<script>
export default {
  name: "app",
  created() {
    this.getLocaltion();
  },
  methods: {
    getLocaltion() {
      const self = this;
      AMap.plugin("AMap.Geolocation", function () {
        var geolocation = new AMap.Geolocation({
          // 是否使用高精度定位，默认：true
          enableHighAccuracy: true,
          // 设置定位超时时间，默认：无穷大
          timeout: 5000,
        });
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, "complete", onComplete);
        AMap.event.addListener(geolocation, "error", onError);

        function onComplete(data) {
          // data是具体的定位信息 精准定位
          self.$store.dispatch("setLocaltion", data);
          self.$store.dispatch("setAddress", data.formattedAddress);
          localStorage.setItem("city", data.addressComponent.city);
          self.$store.dispatch(
            "setLat",
            data.position.lat.toString().replace(".", "")
          );
          self.$store.dispatch(
            "setLng",
            data.position.lng.toString().replace(".", "")
          );
          //加载天气查询插件
          AMap.plugin("AMap.Weather", function () {
            //创建天气查询实例
            var weather = new AMap.Weather();
            //执行实时天气信息查询
            weather.getLive(data.addressComponent.city, function (err, data) {
              self.$store.dispatch("setWeather", {
                weather: "天气：" + data.weather,
                temperature: "温度：" + data.temperature + "°C",
              });
            });
          });
        }

        function onError(data) {
          // 定位出错
          self.getLngLatLocaltion();
        }
      });
    },
    getLngLatLocaltion() {
      const self = this;
      AMap.plugin("AMap.CitySearch", function () {
        var citySearch = new AMap.CitySearch();
        citySearch.getLocalCity(function (status, result) {
          if (status === "complete" && result.info === "OK") {
            // 查询成功，result即为当前所在城市信息
            AMap.plugin("AMap.Geocoder", function () {
              var geocoder = new AMap.Geocoder({
                // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
                city: result.adcode,
              });
              var lnglat = result.rectangle.split(";")[0].split(",");
              geocoder.getAddress(lnglat, function (status, data) {
                if (status === "complete" && data.info === "OK") {
                  // result为对应的地理位置详细信息
                  self.$store.dispatch("setLocaltion", {
                    addressComponent: {
                      city: result.city,
                      province: result.province,
                    },
                    formattedAddress: data.regeocode.formattedAddress,
                  });
                  locationbar.setItem("city", result.city);
                  self.$store.dispatch(
                    "setAddress",
                    data.regeocode.formattedAddress
                  );
                  self.$store.dispatch(
                    "setLat",
                    result.bounds.northeast.lat.toString().replace(".", "")
                  );
                  self.$store.dispatch(
                    "setLng",
                    result.bounds.northeast.lng.toString().replace(".", "")
                  );
                  //加载天气查询插件
                  AMap.plugin("AMap.Weather", function () {
                    //创建天气查询实例
                    var weather = new AMap.Weather();
                    //执行实时天气信息查询
                    weather.getLive(
                      data.regeocode.addressComponent.city,
                      function (err, data) {
                        self.$store.dispatch("setWeather", {
                          weather: "天气：" + data.weather,
                          temperature: "温度：" + data.temperature + "°C",
                        });
                      }
                    );
                  });
                }
              });
            });
          }
        });
      });
    },
  },
};
</script>
<style>
#app {
  width: 100%;
  height: 100%;
  font-size: 14px;
  background-color: #f1f1f1;
}
</style>